<template>
  <div >
    <!-- 顶部按钮 -->
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <!--        <el-button type="primary" @click="showForm">新建场景</el-button>
        <el-button type="primary" @click="parseFile">打开现有场景</el-button>-->

        <!--        <el-button-->
        <!--          type="primary"-->
        <!--          @click="parseFile"-->
        <!--          plain-->
        <!--          style="background-color: orange; color: black"-->
        <!--          >打开现有场景</el-button-->
        <!--        >-->
        <el-select
          id="cj_select"
          v-model="selectedScene"
          placeholder="请选择现有场景"
          style="margin-left:20px;margin-right:20px"
        >
          <el-option
            v-for="item in scenetable"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @click.native="getSslListBySceneID(item.value)"
            
          />
        </el-select>
        <el-button
          type="primary"
          @click="showForm"
          plain
          style="background-color: blue; color: white"
          >新建场景</el-button
        >

        <el-button type="primary" @click="viewSceneBasicInfo"
          >场景基本情况和双方参战条件对比</el-button
        >

        <!-- <el-button
          type="primary"
          @click="open"
          plain
          style="background-color: orange; color: black"
        >
          本体建模
        </el-button> -->
        <!-- <el-dialog
          title="本体建模"
          :visible.sync="showDialog"
          width="30%"
          @close="handleDialogClose">
          <p>Protege正在打开</p>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showDialog = false">确认</el-button>
          </span>
        </el-dialog> -->



        <!-- <el-button type="danger" @click="viewSceneAssessment"
          >查看场景评估结果</el-button
        > -->

        <!--        <el-button type="primary" @click="compareAnalysis">对比分析</el-button>-->
      </el-col>
    </el-row>

    <!-- 中间部分 -->
    <el-row>
      <!-- 左侧 -->
      <el-col :span="0">
        <!-- 场景描述 -->
        <el-card>
          <div
            style="height: 200px; background-color: #b3d7ff"
            class="description"
          >
            <h3>场景描述</h3>
            <!-- 场景描述内容 -->
            <p ref="sceneDescription">
              xxx
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="0">
        <!-- 对比情况 -->
        <el-card>
          <div
            style="height: 200px; background-color: #b3d7ff"
            class="comparison"
          >
            <h3>参战条件</h3>
            <!-- 对比情况内容 -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="0">
        <!-- 杀伤链列表 -->
        <el-card>
          <div style="height: 200px; background-color: #b3d7ff" class="list">
            <h3>杀伤链列表</h3>

            <!-- 列表内容 -->
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <!-- 左侧 -->
      <el-col :span="4">
        <!-- 武器的三个层次 -->
        <el-card>
          <div
            style="height: 800px; width: 220px;"
            class="description bc"
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <h3 style="margin-left:10px">杀伤链列表</h3>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                "
              >
                <button
                  style="width: 100px; height: 40px"
                  @click="selectSsl(0, null)"
                >
                  展示全部
                </button>
              </div>
            </div>
            <el-table :data="sslTrueList" style="width: 100%" border v-loading="loading">
              <el-table-column label="杀伤链">
                <template slot-scope="scope">
                  <!-- 使用 Tooltip 组件包裹 router-link，设置 content 属性为提示信息 -->
                  <el-tooltip content="点击查看杀伤链详情">
                    <!--<router-link :to="{ name: 'Stage5', params: { selectedKillChain: id } }" style="color: blue;">
                      杀伤链-{{ scope.row.id }}
                    </router-link>-->
                    <router-link
                      :to="'/analyse/show?id=' + scope.row"
                      style="color: blue"
                    >
                      杀伤链-{{ scope.row }}
                    </router-link>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="选择" prop="selected">
                <template slot-scope="scope">
                  <el-button type="text" @click="selectSsl(scope.row)"
                    >选择</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <!-- 作战活动图 -->
        <el-card>
          <div
            style="height: 800px;"
            class="comparison bc"
          >
            <h2 style="margin-top:10px;text-align:center">杀伤链/网形式化</h2>
            <!-- 作战活动图 -->
            <!--            <transition name="fade">
              <div v-if="showPlanes" class="plane"></div>
            </transition>-->
            <!-- <router-link :to="{ name: 'Stage5' }">点击</router-link> -->
            <!-- <router-view v-if="routerReload"> </router-view> -->
            <index2 :fromParData="parentData" ref="index2"></index2>
          </div>
        </el-card>
      </el-col>
      <el-col :span="0">
        <!-- 评估对比结果 -->
        <el-card>
          <div
            style="height: 800px; min-width: 700px;"
            class="list bc"
          >
            <h2 style="margin-top:10px;text-align:center">杀伤链-{{this.currentSsl}} 作战活动图</h2>
            <index :fromActivityData="parentActivity" ref="index"></index>
            <!-- 添加按钮 -->
            <!--            <el-button @click="showTimeCompare" v-if="timeCompareVisible">时间对比</el-button>
            <el-button @click="showAccuracyCompare" v-if="accuracyCompareVisible">准确度对比</el-button>
            <el-button @click="showPrecisionCompare" v-if="precisionCompareVisible">精确度对比</el-button>-->
            <!-- <router-view v-if="routerReload"> </router-view> -->
          </div>
        </el-card>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="4">
        <!-- 武器的三个层次 -->
        <el-card>
          <div
            style="height: 800px; width: 220px;"
            class="description bc"
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <h3 style="margin-left:10px">杀伤链列表</h3>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                "
              >
                <button
                  style="width: 100px; height: 40px"
                  @click="selectSsl(0, null)"
                >
                  展示全部
                </button>
              </div>
            </div>
            <el-table :data="sslTrueList" style="width: 100%" border v-loading="loading">
              <el-table-column label="杀伤链">
                <template slot-scope="scope">
                  <!-- 使用 Tooltip 组件包裹 router-link，设置 content 属性为提示信息 -->
                  <el-tooltip content="点击查看杀伤链详情">
                    <!--<router-link :to="{ name: 'Stage5', params: { selectedKillChain: id } }" style="color: blue;">
                      杀伤链-{{ scope.row.id }}
                    </router-link>-->
                    <router-link
                      :to="'/analyse/show?id=' + scope.row"
                      style="color: blue"
                    >
                      杀伤链-{{ scope.row }}
                    </router-link>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="选择" prop="selected">
                <template slot-scope="scope">
                  <el-button type="text" @click="selectSsl2(scope.row)"
                    >选择</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <!-- 作战活动图 -->
        <el-card>
          <div
            style="height: 800px;"
            class="comparison bc"
          >
            <h2 style="margin-top:10px;text-align:center">杀伤链/网形式化</h2>
            <!-- 作战活动图 -->
            <!--            <transition name="fade">
              <div v-if="showPlanes" class="plane"></div>
            </transition>-->
            <!-- <router-link :to="{ name: 'Stage5' }">点击</router-link> -->
            <!-- <router-view v-if="routerReload"> </router-view> -->
            <index2 :fromParData="parentData" ref="index22"></index2>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新建场景的对话框 -->
    <el-dialog
      title="新建场景"
      :visible="formDialogVisible"
      @close="closeFormDialog"
    >
      <!-- 这里放置表单的内容 -->
      <!-- 表单内容 -->
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="场景名称">
          <el-input
            v-model="formData.eventName"
            placeholder="请输入场景名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="场景位置">
          <el-input
            v-model="formData.eventLocation"
            placeholder="请输入场景位置"
          ></el-input>
        </el-form-item>
        <el-form-item label="作战任务">
          <el-input
            v-model="formData.militaryTask"
            placeholder="请输入作战任务"
          ></el-input>
        </el-form-item>
        <el-form-item label="场景时间">
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="formData.startTime"
                  type="datetime"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间">
                <el-date-picker
                  v-model="formData.endTime"
                  type="datetime"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="我方装备">
          <el-row>
            <el-col :span="8">
              <el-button
                @click="showEquipmentDialog('w1')"
                class="custom-button"
                type="text"
                >侦察探测</el-button
              >
            </el-col>
            <el-col :span="8">
              <el-button
                @click="showEquipmentDialog('w2')"
                class="custom-button"
                type="text"
                >指挥控制</el-button
              >
            </el-col>
            <el-col :span="8">
              <el-button
                @click="showEquipmentDialog('w3')"
                class="custom-button"
                type="text"
                >火力打击</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="敌方装备">
          <el-row>
            <el-col :span="8">
              <el-button
                @click="showEquipmentDialog('d1')"
                class="custom-button1"
                type="text"
                >侦察探测</el-button
              >
            </el-col>
            <el-col :span="8">
              <el-button
                @click="showEquipmentDialog('d2')"
                class="custom-button1"
                type="text"
                >指挥控制</el-button
              >
            </el-col>
            <el-col :span="8">
              <el-button
                @click="showEquipmentDialog('d3')"
                class="custom-button1"
                type="text"
                >火力打击</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="推理规则">
          <el-row>
            <el-col :span="8">
              <el-button
                @click="showRuleDialog()"
                class="custom-button"
                type="text"
                >制定规则</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="描述信息">
          <el-input
            type="textarea"
            v-model="formData.description"
            placeholder="请输入描述信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <!--      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="事件名称">
          <el-input v-model="formData.shijianName" placeholder="请输入事件名称"></el-input>
        </el-form-item>-->
      <!--        <el-form-item label="场景名称">
          <el-input v-model="formData.sceneName" placeholder="请输入场景名称"></el-input>
        </el-form-item>
        <el-form-item label="作战任务">
          <el-input v-model="formData.sceneName" placeholder="请输入作战任务"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input ></el-input>
        </el-form-item>-->
      <!-- 其他表单项 -->
      <!--      </el-form>-->

      <!-- 按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFormDialog">取消</el-button>
        <el-button type="primary" @click="saveForm">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog title="选择装备" :visible.sync="equipmentDialogVisible">
      <!-- 装备列表 -->
      <el-form ref="equipmentForm" :model="selectedEquipment" label-width="0">
        <el-row
          v-for="(equipment, index) in equipmentList"
          :key="index"
          class="equipment-row"
        >
          <!-- 装备名称 -->
          <el-col :span="8" class="equipment-name">
            <span>{{ equipment.name }}</span>
          </el-col>
          <!-- 数量选择 -->
          <el-col :span="8">
            <el-form-item>
              <el-select
                v-model="equipment.quantity"
                placeholder="选择数量"
                class="equipment-quantity"
              >
                <el-option
                  v-for="num in quantityOptions"
                  :key="num"
                  :label="num"
                  :value="num"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 确认和取消按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeEquipmentDialog">取消</el-button>
        <el-button type="primary" @click="confirmEquipmentSelection"
          >确认</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="场景基本情况"
      :visible.sync="basicInfoDialogVisible"
      @close="closeBasicInfoDialog"
    >
      <!-- 在这里添加表格的内容 -->
      <el-table :data="tableData" style="width: 100%">
        <!-- 表格的列定义 -->
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="value" label="内容"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="制定规则" :visible.sync="RuleDialogVisible">
      <!-- 装备列表 -->
      <el-form ref="equipmentForm" label-width="0">
        <el-row
          v-for="(rule, index) in ruleList"
          :key="index"
          class="equipment-row"
        >
          <!-- 复选框 -->
          <el-col :span="4">
            <el-form-item>
              <el-checkbox
                v-model="rule.checked"
                class="equipment-checkbox"
              ></el-checkbox>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item> 规则{{ index + 1 }} </el-form-item>
          </el-col>

          <!-- 装备名称 -->
          <el-col :span="8">
            <el-form-item>
              <el-select
                v-model="rule.name1"
                placeholder="选择装备"
                class="equipment-quantity"
              >
                <el-option
                  v-for="num in RuleequipmentList"
                  :key="num"
                  :label="num"
                  :value="num"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 装备名称 -->
          <el-col :span="8">
            <el-form-item>
              <el-select
                v-model="rule.name2"
                placeholder="选择装备"
                class="equipment-quantity"
              >
                <el-option
                  v-for="num in RuleequipmentList"
                  :key="num"
                  :label="num"
                  :value="num"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 确认和取消按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDomain">新增规则</el-button>
        <el-button @click="removeDomain">删除规则</el-button>
        <el-button @click="closeRuleDialog">取消</el-button>
        <el-button type="primary" @click="confirmRuleSelection">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as d3 from "d3";
import { downloadEquipmentname, getSceneInfoBySceneID ,openProtege} from "@/api/ssl";
import { creatSslscene } from "@/api/ssl";
import index from "@/views/nested/activity/index.vue";
import index2 from "@/views/nested/stage5/index.vue";

import {
  getList,
  getChainInfo,
  getSslListBySceneID,
  getSceneList,
  getLine,
  getActivity,
} from "@/api/ssl";
import axios from "axios";

export default {
  components: {
    index,
    index2,
  },
  mounted() {
    this.$nextTick(() => {});
    this.highlightNumbers();
    this.drawWeaponLevels();
    downloadEquipmentname().then((response) => {
      this.equipmentList = response.data.map((name) => ({
        name: name,
        quantity: 0,
      }));
    });
    this.getssl();
    this.getScene();
  },
  data() {
    return {
      parentData: {}, // 父组件中的数据
      parentActivity:{},
      showDialog: false,
      routerReload: true,
      formDialogVisible: false,
      basicInfoDialogVisible: false, // 控制场景基本情况对话框的显示与隐藏
      loading:false,
      tableData: [
        // 表格数据

        {
          name: "基本情况",
          value:
            "xxx",
        },
        { name: "场景名称", value: "跨域协同空对空作战" },
        { name: "场景位置", value: "xxx" },
        { name: "作战任务", value: "xxx" },
        { name: "场景时间", value: "xxx" },
        { name: "我方装备", value: "" },
        { name: "敌方装备", value: "" },
        // ...（其他表格数据）
      ],
      formData: {
        eventName: "",
        eventLocation: "",
        militaryTask: "",
        startTime: "",
        endTime: "",
        ourEquipment: {
          level1: [],
          level2: [],
          level3: [],
        },
        // 添加按钮状态
        timeCompareVisible: false,
        accuracyCompareVisible: false,
        precisionCompareVisible: false,
        showPlanes: true,
        killChainList: [],

        equipmentDialogVisible: false,
        selectedEquipment: {
          level: "",
          list: [], // Selected equipment list
        },
        enemyEquipment: {
          level1: [],
          level2: [],
          level3: [],
        },
        description: "",
        ruleList: [],

        // 其他表单项的初始值
      },
      killChainList: [],

      equipmentDialogVisible: false,
      selectedEquipment: {
        level: "",
        list: [], // Selected equipment list
      },
      equipmentList: [
        // Replace this with your actual equipment data
        { name: "装备1", quantity: 0 },
        { name: "装备2", quantity: 0 },
        // Add more equipment objects as needed
      ],
      quantityOptions: [0, 1, 2, 3, 4, 5], // 下拉框中的数量选项
      sslList: [], //  Ssl 对象数组在这里
      sslTrueList: [],
      selectedScene: null, //现有场景选择
      scenetable: [{ value: "选项1", label: "战场场景1" }],
      currentSsl:undefined,
      tableRow: null,
      RuleDialogVisible: false,
      RuleequipmentList: [],
      ruleList: [{ name1: "", name2: "", checked: false }],
    };
  },

  computed: {
    selectedKillChain() {
      return this.$store.getters.getSelectedKillChain;
    },
  },

  methods: {
    addIdToRows() {
      console.log("addIdToRows12312312312");
      console.log(this.sslList);
      const tableRows = document.getElementsByClassName("el-table__row");
      console.log("addIdToRows12312312312");
      console.log(tableRows);
      // 遍历每一行，为其添加 ID
      tableRows.forEach((row, index) => {
        row.setAttribute("id", `row-${this.sslList[index].id}`);
      });
    },
    open() {
      this.showDialog = true;
      console.log('_____________________________');
      console.log(this.showDialog);
      console.log('_____________________________');
      openProtege()
      // fetch('http://localhost:3000/openProtege')
      //   .then(response => response.text())
      //   .then(data => {
      //     console.log(data);

      //   })
      //   .catch(error => console.error('错误:', error));
        /*this.showDialog = false;*/
    },
    handleDialogClose() {
      this.showDialog = false;
    },
    addDomain() {
      this.ruleList.push({
        name1: "",
        name2: "",
        checked: false,
      });
    },

    removeDomain() {
      this.ruleList = this.ruleList.filter((rule) => rule.checked !== true);
    },

    selectItem(row) {
      // row.selected = !row.selected; // 切换选择状态
      // 将选择的信息传递到三层图中的逻辑
      // 可以使用 row.selected 来判断当前行是否被选择
      this.$store.dispatch("selectKillChain", item);
      // 其他逻辑
    },

    /*async openProtege() {
      try {
        const response = await fetch("/protege");

        if (!response.ok) {
          throw new Error("Failed to open Protege");
        }

        this.loginToProtege();
        console.log("Protege打开成功！");
      } catch (error) {
        console.error(`Protege打开失败: ${error.message}`);
        // 可以添加一个用户友好的错误提示
      }
    },*/
    loginToProtege() {
      const protegeURL = "http://162.14.69.245:8083/";
      const protegeLoginURL = `${protegeURL}#login/`;
      const username = "admin";
      const password = "418protege418";

      // 打开 Protege 登录页面
      const loginWindow = window.open(protegeLoginURL, "_blank");

      // 等待一段时间后自动填写用户名和密码
      setTimeout(() => {
        if (loginWindow) {
          loginWindow.postMessage(
            { action: "setUsername", value: username },
            protegeURL
          );
          loginWindow.postMessage(
            { action: "setPassword", value: password },
            protegeURL
          );
          loginWindow.postMessage({ action: "submitLogin" }, protegeURL);
        }
      }, 2000); // 适当的等待时间，根据实际情况调整
    },

    //获取所有场景列表
    getScene() {
      getSceneList().then((response) => {
        this.scenetable = response.data.map((item) => {
          return {
            value: "选项"+item.sceneId, //设置value的值
            label: item.name, //设置label的值
          };
        });
      });
    },

    //根据给定的场景ID来获取杀伤链列表
    getSslListBySceneID(selectedValue) {
      this.selectedScene = selectedValue;
      const scene_id = parseInt(selectedValue.match(/\d+/)[0]);
      getSslListBySceneID(scene_id).then((response) => {
        // console.log(response)
        this.sslTrueList = response.data.map((item) => item.sslId);
        this.sslList = response.data.map((item) => item.sslId);
        console.log("getSslListBySceneID" + this.sslList);
        this.getssl();
        getLine(scene_id).then((response) => {
          this.parentData = response.data;
          console.log(this.parentData);
          this.selectSsl(0);
          this.selectSsl2(0);
          // this.$refs.index2.sendSslId(this.parentData, 0);
          this.$refs.index.sendActivityData(this.fromActivityData, 0);
          this.currentSsl=undefined
        });
      });
      //更改this.tableData
      getSceneInfoBySceneID(scene_id).then((response) => {
        console.log("---------------");
        console.log(response.data);
        console.log("+++++++++");
        console.log(response.data.description);
        this.tableData.forEach((item) => {
          if (item.name == "基本情况") {
            // 如果item.name存在于formData中，则进行复制
            item.value = response.data.description;
          }
          if (item.name == "场景名称") {
            // 如果item.name存在于formData中，则进行复制
            item.value = response.data.name;
          }
          if (item.name == "场景位置") {
            // 如果item.name存在于formData中，则进行复制
            item.value = response.data.location;
          }
          if (item.name == "作战任务") {
            // 如果item.name存在于formData中，则进行复制
            item.value = response.data.task;
          }
          if (item.name == "场景时间") {
            // 如果item.name存在于formData中，则进行复制
            item.value = response.data.startTime + "-" + response.data.endTime;
          }
          if (item.name == "我方装备") {
            // 如果item.name存在于formData中，则进行复制
            item.value = response.data.friendEquipment;
          }
          if (item.name == "敌方装备") {
            // 如果item.name存在于formData中，则进行复制
            item.value = response.data.enemyEquipment;
          }
        });
      });
      getActivity(scene_id).then((response) => {
        console.log("输入参数");
        console.log(response.data);
        this.fromActivityData = response.data;
        this.$refs.index.sendActivityData(this.fromActivityData, 0);
        this.currentSsl=undefined;
      });
    },

    getssl() {
      if (this.selectedScene == null) {
        return;
      }
      const scene_id = parseInt(this.selectedScene.match(/\d+/)[0]);
      console.log("sceneId");
      console.log(scene_id);
      getList(scene_id)
        .then((response) => {
          console.log("*****");
          console.log(response);
          let temp = [];
          response.data.forEach((item) => {
            let flag = false;
            this.sslTrueList.forEach((item2) => {
              if (item.id == item2) flag = true;
            });
            if (flag) temp.push(item);
          });
          response.data = temp;
          // response.data = response.data.filter(item => this.ssltruelist.includes(item.id));
          // //
          // Assuming the response contains an array of SSL data
          this.sslList = response.data.map((item) => {
            // 使用replace方法去掉字符串两侧的方括号
            const modifiedItem = {
              ...item,
              spyEquipment: item.spyEquipment.replace(/^\[|\]$/g, ""),
              identificationEquipment: item.identificationEquipment.replace(
                /^\[|\]$/g,
                ""
              ),
              // decisionEquipment: item.decisionEquipment.replace(/^\[|\]$/g, ""),
              strikeEquipment: item.strikeEquipment.replace(/^\[|\]$/g, ""),
            };
            return modifiedItem;
          });
          this.addIdToRows();
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
    selectSsl(id) {
      this.$refs.index2.sendSslId(this.parentData, id);
      console.log("selectSsl");
      console.log(id);

      if (id != 0) {
        if (this.tableRow != null) {
          console.log("tableRow1");
          console.log(this.tableRow);
          this.tableRow.setAttribute("style", "background-color: #fff");
        }
        console.log("tableRow2");
        // console.log()
        // this.tableRow =
        this.tableRow = document.getElementById("row-" + id);
        console.log(this.tableRow);

        this.tableRow.setAttribute(
          "style",
          "background-color: rgb(228, 228, 205)"
        );
      }else{
          if (this.tableRow != null) {
          console.log("tableRow1");
          console.log(this.tableRow);
          this.tableRow.setAttribute("style", "background-color: #fff");
      }
      }
      
      this.$refs.index.sendActivityData(this.fromActivityData, id);
      if(id!=0)
        this.currentSsl=id
      else
        this.currentSsl=undefined
    },
    selectSsl2(id) {
      this.$refs.index22.sendSslId(this.parentData, id);
      console.log("selectSsl2");
      console.log(id);

      if (id != 0) {
        if (this.tableRow != null) {
          console.log("tableRow1");
          console.log(this.tableRow);
          this.tableRow.setAttribute("style", "background-color: #fff");
        }
        console.log("tableRow2");
        // console.log()
        // this.tableRow =
        this.tableRow = document.getElementById("row-" + id);
        console.log(this.tableRow);

        this.tableRow.setAttribute(
          "style",
          "background-color: rgb(228, 228, 205)"
        );
      }else{
          if (this.tableRow != null) {
          console.log("tableRow1");
          console.log(this.tableRow);
          this.tableRow.setAttribute("style", "background-color: #fff");
      }
      }
      
      // this.$refs.index.sendActivityData(this.fromActivityData, id);
      // if(id!=0)
      //   this.currentSsl=id
      // else
      //   this.currentSsl=undefined
    },
    sendMessageToChild(message) {
      // 这个方法会作为事件处理函数，用于接收子组件传递的数据
      console.log("Message received in parent:", message);
    },
    // async selectSsl(id) {
    //   this.$router.push(`${this.$route.path}?id=${id}`);
    //   this.routerReload = false;

    //   // 等待路由跳转完成
    //   await new Promise((resolve) => {
    //     this.$nextTick(() => {
    //       resolve();
    //     });
    //   });

    //   this.routerReload = true;
    // },
    // selectSsl(id) {
    //   this.$router.push(`${this.$route.path}?id=${id}`)
    //   this.routerReload = false
    //   this.$nextTick(() => {this.routerReload = true})
    // },
    /* getChainInfo(){
      const idList=this.multipleSelection.map(item => item.id)
      console.log(idList);
      getChainInfo(idList)
        //axios.post('http://localhost:8081/ssl/chainInfo',idList)
        .then(response => {
          // 处理后端的响应
          console.log(response);
          this.timeChainOption.xAxis.data=this.multipleSelection.map(item => "杀伤链-"+item.id)
          this.precisionChainOption.xAxis.data=this.multipleSelection.map(item => "杀伤链-"+item.id)
          this.accuracyChainOption.xAxis.data=this.multipleSelection.map(item => "杀伤链-"+item.id)
          this.timeChainOption.series[0].data=response.data.t0
          this.timeChainOption.series[1].data=response.data.t1
          this.timeChainOption.series[2].data=response.data.t2
          this.timeChainOption.series[3].data=response.data.t3
          this.timeChainOption.series[4].data=response.data.t4
          this.timeChainOption.series[5].data=response.data.t5
          this.precisionChainOption.series[0].data=response.data.p.map(item=>item*100)
          this.accuracyChainOption.series[0].data=response.data.v.map(item=>item*100)
          this.drawLine()
        })
        .catch(error => {
          // 处理请求错误
          console.error(error);
        });
    },*/
    getChainInfo() {
      const idList = this.multipleSelection.map((item) => item.id);
      console.log(idList);
      getChainInfo(idList)
        .then((response) => {
          // 处理后端的响应
          console.log(response);

          // 更新表格数据
          this.sslList = response.data.map((item) => {
            return {
              id: item.id,
              // 其他字段根据需要添加
            };
          });

          // Rest of your code
          this.timeChainOption.xAxis.data = this.sslList.map(
            (item) => "杀伤链-" + item.id
          );
          this.precisionChainOption.xAxis.data = this.sslList.map(
            (item) => "杀伤链-" + item.id
          );
          this.accuracyChainOption.xAxis.data = this.sslList.map(
            (item) => "杀伤链-" + item.id
          );
          // 其他更新逻辑
          this.drawLine();
        })
        .catch((error) => {
          // 处理请求错误
          console.error(error);
        });
    },

    /* selectItem(item) {
       // 处理选择按钮点击事件
       console.log('选择按钮点击', item);
       // 在这里添加处理选择按钮的逻辑
       // 根据 item.select 的状态进行选择逻辑的处理
       item.select = !item.select;
     },*/
    viewDetails(details) {
      // 处理查看详细情况按钮点击事件
      console.log("查看详细情况", details);
      // 在这里添加处理查看详细情况的逻辑
    },
    viewSceneAssessment() {
      // 处理查看场景评估结果按钮点击事件
      console.log("查看场景评估结果");
      console.log(this.selectedScene);
      // console.log(this.scenetable);
      // 在这里添加处理查看场景评估结果的逻辑
      // 使用编程式导航跳转到 analyse/index.vue
      //this.$router.push({ name: "AnalyseIndex" });
      this.$router.push({
        path: "/form/analyse",
        query: {
          selectedScene: this.selectedScene,
        },
      });
      // this.$router.push({ path: "/analyse/show" });
    },
    showForm() {
      // 打开对话框
      this.formDialogVisible = true;
    },
    closeFormDialog() {
      // 关闭对话框
      this.formDialogVisible = false;
      this.formData = {
        eventName: "",
        eventLocation: "",
        militaryTask: "",
        startTime: "",
        endTime: "",
        ourEquipment: {
          level1: [],
          level2: [],
          level3: [],
        },
        // 添加按钮状态
        timeCompareVisible: false,
        accuracyCompareVisible: false,
        precisionCompareVisible: false,
        showPlanes: true,
        killChainList: [],

        equipmentDialogVisible: false,
        selectedEquipment: {
          level: "",
          list: [], // Selected equipment list
        },
        enemyEquipment: {
          level1: [],
          level2: [],
          level3: [],
        },
        description: "",
        ruleList: [],

        // 其他表单项的初始值
      };
      this.ruleList = [{ name1: "", name2: "", checked: false }];
      this.RuleequipmentList = [];
    },
    saveForm() {
      // 处理表单保存逻辑
      // this.tableData.forEach(item => {
      //   if (item.name=="基本情况") {
      //     // 如果item.name存在于formData中，则进行复制
      //     item.value=this.formData.description;
      //   }
      //   if (item.name=="事件名称") {
      //     // 如果item.name存在于formData中，则进行复制
      //     item.value=this.formData.eventName;
      //   }
      //   if (item.name=="事件位置") {
      //     // 如果item.name存在于formData中，则进行复制
      //     item.value=this.formData.eventLocation;
      //   }
      //   if (item.name=="作战任务") {
      //     // 如果item.name存在于formData中，则进行复制
      //     item.value=this.formData.militaryTask;
      //   }
      //   if (item.name=="事件时间") {
      //     // 如果item.name存在于formData中，则进行复制
      //     item.value=this.formData.startTime+"-"+this.formData.endTime;
      //   }
      //   if (item.name=="我方装备") {
      //     // 如果item.name存在于formData中，则进行复制
      //     if(this.formData.ourEquipment.level1.length>0){
      //       this.formData.ourEquipment.level1.forEach(item1 => {
      //         item.value=item1.name+'*'+item1.quantity+','
      //       })
      //     }
      //     else

      //     if(this.formData.ourEquipment.level2.length>0) {
      //       this.formData.ourEquipment.level2.forEach(item1 => {
      //         item.value+=item1.name+'*'+item1.quantity+','
      //       })
      //     }
      //     if(this.formData.ourEquipment.level3.length>0) {
      //       this.formData.ourEquipment.level3.forEach(item1 => {
      //         item.value+=item1.name+'*'+item1.quantity
      //       })
      //     }
      //   }
      //   if (item.name=="敌方装备") {
      //     // 如果item.name存在于formData中，则进行复制
      //     if(this.formData.enemyEquipment.level1.length>0){
      //       this.formData.enemyEquipment.level1.forEach(item1 => {
      //         item.value=item1.name+'*'+item1.quantity+','
      //       })
      //     }
      //     if(this.formData.enemyEquipment.level2.length>0) {
      //       this.formData.enemyEquipment.level2.forEach(item1 => {
      //         item.value += item1.name + '*' + item1.quantity + ','
      //       })
      //     }
      //     if(this.formData.enemyEquipment.level3.length>0) {
      //       this.formData.enemyEquipment.level3.forEach(item1 => {
      //         item.value += item1.name + '*' + item1.quantity
      //       })
      //     }
      //   }
      // });
      this.loading=true
      console.log("保存表单", this.formData);
      console.log("保存表单", this.formData);
      // 在这里添加保存表单的其他逻辑
      creatSslscene(this.formData).then((response) => {
        console.log(response);
        if (response.code == "0") {
          this.getScene();
          this.$message({
            showClose: true,
            message: '场景创建成功',
            type:'success'
          });
          this.loading=false
        } else {
          this.$message({
            showClose: true,
            message: '场景创建失败',
            type:'error'
          });
          this.loading=false
        }
      });
      this.formData = {
        eventName: "",
        eventLocation: "",
        militaryTask: "",
        startTime: "",
        endTime: "",
        ourEquipment: {
          level1: [],
          level2: [],
          level3: [],
        },
        // 添加按钮状态
        timeCompareVisible: false,
        accuracyCompareVisible: false,
        precisionCompareVisible: false,
        showPlanes: true,
        killChainList: [],

        equipmentDialogVisible: false,
        selectedEquipment: {
          level: "",
          list: [], // Selected equipment list
        },
        enemyEquipment: {
          level1: [],
          level2: [],
          level3: [],
        },
        description: "",
        ruleList: [],

        // 其他表单项的初始值
      };

      this.ruleList = [];
      this.RuleequipmentList = [];

      // 关闭对话框
      this.formDialogVisible = false;
    },
    viewSceneBasicInfo() {
      // 处理查看场景基本情况按钮点击事件
      console.log("查看场景基本情况");
      // 在这里添加处理查看场景基本情况的逻辑
      // 打开场景基本情况对话框
      this.basicInfoDialogVisible = true;
      console.log(this.basicInfoDialogVisible);
    },

    closeBasicInfoDialog() {
      // 关闭场景基本情况对话框
      this.basicInfoDialogVisible = false;
    },

    compareAnalysis() {
      // 处理对比分析按钮点击事件
      console.log("对比分析");
      // 在这里添加处理对比分析的逻辑
    },
    parseFile() {
      // 打开现有场景的逻辑
      console.log("打开现有场景");
    },
    showTimeCompare() {
      // 处理时间对比按钮点击事件
      console.log("时间对比");
      // 在这里添加处理时间对比的逻辑
    },

    showAccuracyCompare() {
      // 处理准确度对比按钮点击事件
      console.log("准确度对比");
      // 在这里添加处理准确度对比的逻辑
    },

    showPrecisionCompare() {
      // 处理精确度对比按钮点击事件
      console.log("精确度对比");
      // 在这里添加处理精确度对比的逻辑
    },
    highlightNumbers() {
      const descriptionElement = this.$refs.sceneDescription;
      const textContent = descriptionElement.textContent;

      // 使用正则表达式匹配数字
      const highlightedText = textContent.replace(
        /\d+/g,
        '<span class="highlighted-number">$&</span>'
      );

      // 将替换后的内容设置回原始元素
      descriptionElement.innerHTML = highlightedText;
    },
    drawWeaponLevels() {
      const svgContainer = d3
        .select(".description")
        .select(".weapon-svg")
        .attr("width", 200) // 设置SVG容器的宽度
        .attr("height", 300); // 设置SVG容器的高度

      const weaponData = [
        { level: "第一层级", planes: ["plane1", "plane2"], color: "blue" },
        { level: "第二层级", planes: ["plane3", "plane4"], color: "green" },
        { level: "第三层级", planes: ["plane5", "plane6"], color: "orange" },
      ];

      // 绘制平行四边形和飞机
      const weaponGroups = svgContainer
        .selectAll(".weapon-group")
        .data(weaponData)
        .enter()
        .append("g")
        .attr("class", "weapon-group")
        .attr("transform", (d, i) => `translate(20, ${i * 160})`);

      weaponGroups
        .append("polygon")
        .attr("points", "0,0 80,0 60,150 20,150")
        .style("fill", (d) => d.color);

      weaponGroups
        .selectAll(".plane")
        .data((d) => d.planes)
        .enter()
        .append("image")
        .attr("xlink:href", "../../../assets/Jjj.jpg") // 实际的飞机图标路径
        .attr("width", 30)
        .attr("height", 30)
        .attr("x", (d, i) => i * 35)
        .attr("y", 80);

      // 绘制连线
      const lineData = [
        { source: [80, 75], target: [250, 75], color: "blue" },
        { source: [80, 235], target: [250, 235], color: "green" },
      ];

      svgContainer
        .selectAll(".line")
        .data(lineData)
        .enter()
        .append("line")
        .attr("x1", (d) => d.source[0])
        .attr("y1", (d) => d.source[1])
        .attr("x2", (d) => d.target[0])
        .attr("y2", (d) => d.target[1])
        .attr("stroke", (d) => d.color)
        .attr("stroke-width", 2);

      // 绘制红点目标
      svgContainer
        .append("circle")
        .attr("cx", 280)
        .attr("cy", 75)
        .attr("r", 5)
        .style("fill", "red");
    },
    // 显示装备对话框并设置选定的级别
    showEquipmentDialog(level) {
      this.selectedEquipment.level = level;
      this.equipmentDialogVisible = true;
      this.equipmentList.forEach((equipment) => {
        equipment.quantity = 0;
      });
    },

    closeEquipmentDialog() {
      // 关闭对话框
      this.equipmentDialogVisible = false;
      this.equipmentList.forEach((equipment) => {
        equipment.quantity = 0;
      });
    },
    // 确认装备选择
    confirmEquipmentSelection() {
      // 获取选定的装备列表
      const selectedList = this.equipmentList.filter(
        (equipment) => equipment.quantity > 0
      );
      console.log("000000000000000000");
      console.log(selectedList);

      // 根据选定的级别更新ourEquipment中的对应字段
      if (this.selectedEquipment.level === "w1") {
        this.formData.ourEquipment.level1 = selectedList.map(
          ({ name, quantity }) => ({ name, quantity })
        );
        selectedList.forEach((currentItem) => {
          // 在这里处理当前项
          if (!this.RuleequipmentList.includes(currentItem.name)) {
            this.RuleequipmentList.push(currentItem.name);
          }
        });
      } else if (this.selectedEquipment.level === "w2") {
        this.formData.ourEquipment.level2 = selectedList.map(
          ({ name, quantity }) => ({ name, quantity })
        );
        selectedList.forEach((currentItem) => {
          // 在这里处理当前项
          if (!this.RuleequipmentList.includes(currentItem.name)) {
            this.RuleequipmentList.push(currentItem.name);
          }
        });
      } else if (this.selectedEquipment.level === "w3") {
        this.formData.ourEquipment.level3 = selectedList.map(
          ({ name, quantity }) => ({ name, quantity })
        );
        selectedList.forEach((currentItem) => {
          // 在这里处理当前项
          if (!this.RuleequipmentList.includes(currentItem.name)) {
            this.RuleequipmentList.push(currentItem.name);
          }
        });
      } else if (this.selectedEquipment.level === "d1") {
        this.formData.enemyEquipment.level1 = selectedList.map(
          ({ name, quantity }) => ({ name, quantity })
        );
      } else if (this.selectedEquipment.level === "d2") {
        this.formData.enemyEquipment.level2 = selectedList.map(
          ({ name, quantity }) => ({ name, quantity })
        );
      } else if (this.selectedEquipment.level === "d3") {
        this.formData.enemyEquipment.level3 = selectedList.map(
          ({ name, quantity }) => ({ name, quantity })
        );
      }

      console.log("=================");
      console.log(this.RuleequipmentList);
      // 关闭对话框
      this.equipmentDialogVisible = false;
    },

    // 显示装备对话框并设置选定的级别
    showRuleDialog() {
      this.RuleDialogVisible = true;
    },

    closeRuleDialog() {
      // 关闭对话框
      this.RuleDialogVisible = false;
    },

    confirmRuleSelection() {
      // 获取选定的装备列表
      const selectedList = this.ruleList.filter((rule) => rule.checked);
      console.log("_________");
      console.log(selectedList);

      // 根据选定的级别更新ourEquipment中的对应字段
      this.formData.ruleList = selectedList.map(({ name1, name2 }) => ({
        name1,
        name2,
      }));

      console.log("gghggggg");
      console.log(this.formData.ruleList);
      // 关闭对话框
      this.RuleDialogVisible = false;
    },
  },
  created() {
    // 设置按钮的可见性
    // 显示时间对比按钮，将 timeCompareVisible 设置为 true
    this.timeCompareVisible = true;
    this.accuracyCompareVisible = true;
    this.precisionCompareVisible = true;
    // 在一定时间后修改 showPlanes，触发过渡效果
    setTimeout(() => {
      this.showPlanes = false;
    }, 2000); // 2秒后修改 showPlanes
  },
};
</script>

<style scoped>
/* 自定义样式 */
.description {
  margin: 0;
  position: relative;
}

/* .parallelogram {
  position: absolute;
  width: 80px; /* 设置平行四边形的宽度 */
/* height: 180px; 设置平行四边形的高度 */
/* background-color: #fff; /* 设置平行四边形的背景颜色 */
/* transform: skew(-20deg); 使用 skew 变换创建平行四边形效果 */
/* margin: 10px; 设置平行四边形之间的间距 */
/* 其他样式，如边框、阴影等 */
/* } */

/* 每个平行四边形的具体位置可以通过 top、left、right、bottom 等属性调整 */
/* .parallelogram:nth-child(1) {
  top: 20px;
  left: 30px;
}

.parallelogram:nth-child(2) {
  top: 120px;
  left: 150px;
}

.parallelogram:nth-child(3) {
  top: 250px;
  left: 280px;
} */

.combat-flow {
  /* 飞机作战流程图样式 */
}

.list {
  /* 列表样式 */
}

.interface {
  /* 界面接口样式 */
}

.comparison {
  position: relative;
}

/* 飞机样式 */
.plane {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  /* 初始位置 */
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  /* 过渡效果 */
  transition: left 2s ease-in-out;
}

/* 过渡效果的定义 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.highlighted-number {
  color: red;
}
/* 使用 SVG 绘制的平行四边形样式 */
.weapon-group polygon {
  fill: #fff; /* 设置平行四边形的背景颜色 */
  transform: skew(-20deg); /* 使用 skew 变换创建平行四边形效果 */
  margin: 10px; /* 设置平行四边形之间的间距 */
}

/* 每个平行四边形的具体位置可以通过 top、left、right、bottom 等属性调整 */
.weapon-group:nth-child(1) polygon {
  top: 20px;
  left: 30px;
}

.weapon-group:nth-child(2) polygon {
  top: 120px;
  left: 150px;
}

.weapon-group:nth-child(3) polygon {
  top: 250px;
  left: 280px;
}
.button-container {
  margin-top: 10px;
}
.el-button {
  margin-right:10px;
}
.custom-button {
  background-color: #409eff; /* 设置背景颜色 */
  color: #ffffff; /* 设置文本颜色 */
  border: none; /* 移除按钮边框 */
  border-radius: 5px; /* 应用边框半径以实现圆角 */
  padding: 10px 15px; /* 调整填充以获得更好的间距 */
  cursor: pointer; /* 在悬停时更改光标 */
}

.custom-button1 {
  background-color: #ffa500; /* 设置背景颜色 */
  color: #ffffff; /* 设置文本颜色 */
  border: none; /* 移除按钮边框 */
  border-radius: 5px; /* 应用边框半径以实现圆角 */
  padding: 10px 15px; /* 调整填充以获得更好的间距 */
  cursor: pointer; /* 在悬停时更改光标 */
}

.custom-button:hover {
  background-color: #66b1ff; /* 悬停时更改背景颜色 */
}

.equipment-row {
  border-bottom: 1px solid #ebeef5; /* 行之间添加底部边框 */
  padding: 10px 0; /* 行内边距 */
}

.equipment-checkbox {
  margin-top: 5px;
}

.equipment-name {
  line-height: 32px;
  font-weight: bold;
}

.equipment-quantity {
  width: 80%;
}

.equipment-row {
  border-bottom: 1px solid #ebeef5;
  padding: 10px 0;
}

.equipment-checkbox {
  margin-top: 5px;
}

.equipment-name {
  line-height: 32px;
  border-right: 1px solid #ebeef5;
  padding-right: 10px;
}

.equipment-quantity {
  width: 100%;
}

/* 样式可以根据自己的需要进行调整 */
.highlightable {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.is-active {
  background-color: rgb(228, 228, 205);
  /* 其他高亮样式 */
}

.bc {
   /* background-color: white; */
   border: 1px solid rgb(228 229 231);
}

</style>
